<template>
	<view class="edit-wrap">
		<u--form labelPosition="left" labelWidth="100" labelAlign="center" :model="model" :rules="rules" ref="form">
			<u-form-item label="警告名称" borderBottom>
				<u--input v-model="model.alertName" border="none" readonly></u--input>
			</u-form-item>
			<u-form-item label="设备编号" borderBottom>
				<u--input v-model="model.serialNumber" border="none" readonly></u--input>
			</u-form-item>
			<u-form-item label="设备名称" borderBottom>
				<u--input v-model="model.deviceName" border="none" readonly></u--input>
			</u-form-item>
			<u-form-item label="告警类别" borderBottom>
				<u--input v-model="model.status" border="none" readonly></u--input>
			</u-form-item>
			<u-form-item label="告警时间" borderBottom>
				<u--input v-model="model.createTime" border="none" readonly></u--input>
			</u-form-item>
			<u-form-item label="数据" borderBottom>
				<div v-html="formatDetail(model.detail)"></div>
			</u-form-item>
			<u-form-item label="处理结果" prop="remark" borderBottom>
				<u-textarea v-model="model.remark" fontSize="14" placeholder="请输入内容" confirmType="done"></u-textarea>
			</u-form-item>
		</u--form>

		<view class="btn-save">
			<u-button type="primary" @tap="handleFormTap" text="保存"></u-button>
		</view>
	</view>
</template>

<script>
	import { getAlertLog, editAlertLog } from '@/apis/modules/alertLog.js';

	export default {
		data () {
			return {
				rules: {
					'remark': {
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					},
				},
				// 详情数据
				model: {
					remark: '',
				},
				alertLogId: null, // 告警id
				alertData: null, // 遥控器详情信息
			};
		},
		onLoad: function (option) {
			this.alertLogId = Number(option.alertLogId) || null;
			this.getAlertDetail();
		},
		methods: {
			// 获取遥控器详情
			getAlertDetail () {
				getAlertLog(this.alertLogId).then(res => {
					this.alertData = res.data;
					this.model = { ...this.alertData };
				});
			},
			// 格式化detail字段
			formatDetail (json) {
				if (json == null || json == "") {
					return;
				}
				let item = JSON.parse(json);
				let result = 'id：<span style="color:#F56C6C">' + item.id + '</span><br />';
				result = result + 'value：<span style="color:#F56C6C">' + item.value + '</span><br />';
				result = result + 'remark：<span style="color:#F56C6C">' + item.remark + '</span>';
				return result;
			},
			// 保存
			handleFormTap () {
				this.$refs.form.validate().then(res => {
					editAlertLog(this.model).then(response => {
						if (response.code === 200) {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							// 更新列表
							// #ifdef H5 || APP-PLUS
							prevPage.getDatas();
							// #endif
							// #ifdef MP-WEIXIN
							prevPage.$vm.getDatas();
							// #endif
							uni.navigateBack();
						} else {
							uni.showToast({
								icon: 'error',
								title: '保存失败'
							});
						}
					});
				});
			}
		},
		onReady () {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules);
		},
	};
</script>

<style lang="scss">
	.edit-wrap {
		padding: 10px;

		.btn-save {
			margin-top: 40px;
		}
	}
</style>